<template>
  <div> 
    
 <Card  ref="card">
      <p slot="title">操作日志</p>
      <a href="#" slot="extra" @click.prevent="SearchOperateLog">刷新</a>
      
    </Card>
    
    <Table class="margin-top-10" border ref="table" :columns="columns" :data="actionList" :height="tableHeight"></Table>
   <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50,100,300,500,1000,2000,5000]"
        @on-change="s=>{pPage=s;SearchOperateLog();}"
        @on-page-size-change="p=>{pSize=p;pPage=1;SearchOperateLog()}"
        show-total
        show-sizer
      />
    </Row>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { SearchOperateLog } from "@/api/data";
import { mapMutations } from "vuex";
export default {
  name: "operate-log",
  data() {
    return {     
      total: 0,
      pPage: 1,
      pSize: 50,
      tableHeight:450, 
      columns: [
        {        
          title: "序号",
          key:"R_INDEX",
          width: 100
        },
        {
          key: "LoginTime",
          title: "操作时间",
            width: 200,
          
        },{
          key: "LoginName",
          title: "操作人",
          width: 150,
           
        },
        
        {
          key: "Message",
          title: "详情"
        },
        
      ],
      actionList: []
    };
  },

  computed: {},
  methods: {
    SearchOperateLog() {
      let vm = this;
      SearchOperateLog({
         page: vm.pPage,
        size: vm.pSize,
      }).then(res => {
        const data = res.data;
        if (data.Type == 1) {
           vm.total = data.Data.Total;
          vm.actionList = data.Data.Rows;
        } else {
          this.$Message.error(data.Message);
        }
      });
    },   
  },
  mounted() {
     var cardHeight = this.$refs.card.$el.offsetHeight;  
    this.tableHeight =
      window.innerHeight - cardHeight-200;
    this.SearchOperateLog();
  }
};
</script>

<style>
</style>
